import styles from './index.less';
import icon from '../../assets/icon.png'
import header2 from '../../assets/header2.png'
import logo from '../../assets/logo.png'
import Searchs from '../Home/compoents/Search';
import TableData from './compoents/Data';
import Chart from './compoents/Chart';
import Card from './compoents/Card'
import '../global.less'; // 引入global.less
import { Button } from 'antd';
import { history } from 'umi';
import request from 'umi-request';


const loginOut = async () => {
    const res = await request.get('/api/logout')
    if (res.code == 200) {
        history.push('/login')
        localStorage.removeItem('username');
    }
}


export default function Home() {
    return (
        <div className='content'>
            {/* top区域 */}
            <div className={styles.topSection}>
                {/* logo */}
                <div className={styles.logo}>
                    <h1><img src={logo} /></h1>
                </div>
                {/* 标题 */}
                <div className={styles.nav}>
                    <ul>
                        <li>底层平台：<img src={icon}></img><span>Hyperchan</span></li>
                        <li>/</li>
                        <li>链名称:<span>zzk12011c6d</span></li>
                        <li>/</li>
                        <li>命名空间:<span>global</span></li>
                    </ul>
                </div>
                {/* 搜索 */}
                <Searchs></Searchs>
                <div className={styles.leftHeader}><img src={header2} className={styles.header2}></img></div>
                {/* 退出 */}
                <Button type="primary" className={styles.tuiChu} onClick={loginOut}>退出</Button>
            </div>

            <div className={styles.middleSection}>
                <div className={styles.tdWrapper}>
                    {/* Data区域 */}
                    <TableData></TableData>
                    {/* 图标区域 */}
                    <Chart></Chart>
                </div>
                <div>
                    {/* 轮播图区域 */}
                    <Card></Card>
                </div>
            </div>
        </div>
    )
}
